<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>抽奖啦</title>
<link rel="shortcut icon" href="/img/kk.ico" type="image/x-icon"/>
    <link rel="bookmark" href="/img/kk.ico"/>
	<link type="text/css" rel="stylesheet" href="css/icomoon/svg.css">
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<meta name="keywords" content="King's">
	<meta content="Our Love Story" name="King's">
<style type="text/css">
h1{
color: #ffdddd;
font-family: '隶书';
font-style: italic;
}
td {
width: 50px;
height: 50px;
border: 5px solid #ccc;
text-align: center;
vertical-align: middle;
font-size: 20px;
font-family: '隶书';
font-weight: 900;
}
#d{
width: 400px;
height: 400px;
font-family: '隶书';
font-size: 90px;
font-weight: 900;
text-align: center;
line-height: 400px;
color: red;
background-color: #00ff00;
}
#noborder{
border: 0px;
}
</style>
<script src='js/jquery.js'></script> 

</head>
<body>
<marquee behavior="alternate" bgcolor="#cccccc" direction="right" scrolldelay="20" scrollamount="10">
<span style="font-size: 50px; font-family: 隶书;color: #ffff00">转转乐</span>
<audio src="music/ilovecinemas.mp3" autoplay="autoplay" controls="controls"  loop="loop" ></audio>
</marquee>
<center>
<div id="left">

<span style="color:#0F0F0F">请输入数字：</span>
<input type="text" id="num">
<input type="button" id="go" onclick="StartGame()" value="Go">
<!--  <input type="button" id="go" onclick="Again()" value="Again">-->
<input id="txtnum" type="hidden"/>
</div>
</center>
<center>
<div id="tbdiv">
<table id="tb" style="background:#ccc"></table>
</div>
</center>
<p></p>
<script type="text/javascript">
var index = 0, //当前亮区位置
prevIndex = 0, //前一位置
Speed = 250, //初始速度
Time, //定义对象
EndIndex = 0, //决定在哪一格变慢
tb = document.getElementById("tb"), //获取tb对象
cycle = 0, //转动圈数
EndCycle = 3, //计算圈数
flag = false, //结束转动标志
quick = 0; //加速
/**  function Again(){
history.go(1);
StartGame();
}
*/
function go(){
inf = parseFloat($("#num").val());
sqs = parseFloat(Math.ceil((inf + 3) / 4));
arr = GetSide(sqs, sqs), //初始化数组
number1(inf);
for ( var j = 1; j < sqs*sqs; j++) {
$("#t" + j).css( {
"backgroundColor" : randomColor(),
"color" : randomColor()
});
}
//$("#tb").css("dispaly","none")
}
function randomColor() {
var r = Math.floor(Math.random() * 15);
var rr = Math.floor(Math.random() * 15);
var g = Math.floor(Math.random() * 15);
var gg = Math.floor(Math.random() * 15);
var b = Math.floor(Math.random() * 15);
var bb = Math.floor(Math.random() * 15);
var color = new Array();
for ( var i = 0; i < 10; i++) {
color[i] = i;
}
color[10] = "A";
color[11] = "B";
color[12] = "C";
color[13] = "D";
color[14] = "E";
color[15] = "F";
return "#" + color[r] + color[rr] + color[g] + color[gg] + color[b]
+ color[bb];
}
/*
* 删除左右两端的空格
*/
function Trim(str) {
return str.replace(/(^\s*)|(\s*$)/g, "");
}
/*
* 定义数组
*/
function GetSide(m, n) {
//初始化数组
var arr = [];
for ( var i = 0; i < m; i++) {
arr.push( []);
for ( var j = 0; j < n; j++) {
arr[i][j] = i * n + j;
}
}
//获取数组最外圈
var resultArr = [];
var tempX = 0, tempY = 0, direction = "Along", count = 0;
while (tempX >= 0 && tempX < n && tempY >= 0 && tempY < m && count < m * n) {
count++;
resultArr.push( [ tempY, tempX ]);
if (direction == "Along") {
if (tempX == n - 1)
tempY++;
else
tempX++;
if (tempX == n - 1 && tempY == m - 1)
direction = "Inverse"
} else {
if (tempX == 0)
tempY--;
else
tempX--;
if (tempX == 0 && tempY == 0)
break;
}
}
return resultArr;
}
function StartGame() {
//$("#tb").css("dispaly","block");
go();
$("#tb").css("dispaly","block");
var result = Math.floor(Math.random()*(sqs*sqs-(sqs-2)*(sqs-2)));
$("#txtnum").val(result)
cycle = 0;
flag = false;
EndIndex = Math.floor(Math.random() * 16);
//EndCycle=Math.floor(Math.random()*4);
EndCycle = 3;
Time = setInterval(Star, Speed);
}
function Star(num ) {
//跑马灯变速
if (flag == false) {
//走五格开始加速
if (quick == 5) {
clearInterval(Time);
Speed = 50;
Time = setInterval(Star, Speed);
}
//跑N圈减速
if (cycle == EndCycle + 1 && index == EndIndex) {
clearInterval(Time);
Speed = 300;
flag = true; //触发结束
Time = setInterval(Star, Speed);
}
}
if (index >= arr.length) {
index = 0;
cycle++;
}
//结束转动并选中号码
if (flag == true
&& index == parseInt(Trim(document.getElementById("txtnum").value)) - 1) {
var l = parseFloat($("#txtnum").val());
tdnum = $("td[id=t"+l+"]").html();
setTimeout(fu,3000);
quick = 0;
clearInterval(Time);
}
tb.rows[arr[index][0]].cells[arr[index][1]].style.border = "5px solid red";
//tb.rows[arr[index][0]].cells[arr[index][1]].focus;
if (index > 0)
prevIndex = index - 1;
else {
prevIndex = arr.length - 1;
}
tb.rows[arr[prevIndex][0]].cells[arr[prevIndex][1]].style.border = "5px solid #ccc";
index++;
quick++;
}
function fu(){
$("#tbdiv").fadeOut(3000,function(){
$("tbdiv").css("display","display");
$("tbdiv").remove();
$("body").append("<center><div id=d class='last'>"+tdnum+"</div></center>");
});
}
/*
window.onload=function(){
Time = setInterval(Star,Speed);
}
*/
function number1(ins) {
var first = true;
ins = parseFloat(ins)
var sq = parseFloat(Math.ceil((ins + 3) / 4));
var num = new Array();
for ( var i = 0; i < ins; i++) {
num[i] = parseFloat(i + 1);
}
var arg = new Array();
var temp = 0;
for ( var i = 0; i < sq; i++) {
$("table").append("<tr id=tr" + i + "></tr>");
}
var create = 1;
inputcount = parseFloat($("#num").val());
widthcount = parseFloat(Math.ceil((inputcount + 3) / 4));   //宽
for(var i=0;i<sq;i++){
arg.push([]);
for(var j = 0;j<sq;j++){
if(i==0&&j!=sq){
arg[i][j] = num[temp++];
$("tr[id=tr"+i+"]").append("<td id=t"+arg[i][j]+">"+arg[i][j]+"</td>");
}else if(i==0&&j==sq-1){
arg[i][j] = num[temp++];
$("tr[id=tr"+i+"]").append("<td id=t"+arg[i][j]+">"+arg[i][j]+"</td>");
}else if(i<sq-1){
if(j==0){
arg[i][j] = sq*sq-(sq-2)*(sq-2)-(i-1);
$("tr[id=tr"+i+"]").append("<td id=t"+arg[i][j]+">"+arg[i][j]+"</td>");
}else if(j==sq-1){
arg[i][j] = sq+i;
$("tr[id=tr"+i+"]").append("<td id=t"+arg[i][j]+">"+arg[i][j]+"</td>");
}else{
arg[i][j] = 0;
//if(create == 1){
$("tr[id=tr"+i+"]").append("<td id='noborder'  style='background:#ccc'></td>")
//}
//create = 0;
}
}else if(i==sq-1){
arg[i][j] = sq*3-(j+2);
$("tr[id=tr"+i+"]").append("<td id=t"+arg[i][j]+">"+arg[i][j]+"</td>")
}
}
}
//inputcount = parseFloat($("#num").val());
//widthcount = parseFloat(Math.ceil((inputcount + 3) / 4));   //宽
//$("tr[id=tr1]").append("<td colspan='"+(widthcount-2)+"' rowspan='"+(widthcount-2)+"' style='background:red'></td>");
return arg;
}
</script>
<!--  <embed  hidden="false"  loop="-1" play="true" controller="true" wmode="Transparent" autostart="false" src="music/whereslove.mp3" />-->

</body>
</html>